<script>
import {defineComponent} from 'vue'
import instance from "@/api/axios";

export default defineComponent({
    name: "axiosViem",
    created() {
        this.axios.get('https://wkt.myhope365.com//weChat/applet/course/banner/list').then(res => {
            this.imgList = res.data.data
        });
        this.getCourse('boutique').then(res=>{
            console.log(res);
          this.boutiqueList=res.rows;
        });
        this.getCourse('free').then(res=>{
            console.log(res);
            this.courseList=res.rows;
        });
        this.getCourse('discount').then(res=>{
            console.log(res);
            this.discountList=res.rows;
        });

    },
    methods: {
        getCourse(type) {
           return instance.post('https://wkt.myhope365.com//weChat/applet/course/list/type', {
                    type,
                    pageNum: 2,
                    pageSize: 5,
                },
            )
        }
    },
    data() {
        return {
            imgList: '',
            courseList: '',
            boutiqueList:'',
            discountList:'',
        }
    }
})
</script>

<template>
    <div class="bigbox">
<!--        <div v-for="item in imgList" :key="item.id">-->
<!--            <img :src="item.imgUrl">-->
<!--        </div>-->
        <div class="box">
            <div v-for="item in courseList" :key="item.courseId">
                <img :src="item.coverFileUrl">
                <div  style="font:20px bolder">{{ item.courseTitle }}</div>
                <div>{{ item.learningNum }}人学习</div>
                <div v-if="item.isFree==='1'" style="color: #42b983;font-weight: bolder">免费</div>
                <div v-else-if="item.isDiscount==='1'">现价:<span style="color: red;font-weight: bolder">￥{{item.discountPrice}}</span>&nbsp;原价:<del style="color: gray;font-weight: 300">￥{{item.coursePrice}}</del></div>
                <div v-else>价格<span style="color: red;font-weight: bolder">￥{{item.coursePrice}}</span></div>
            </div>
        </div>
        <div class="box">
            <div v-for="item in boutiqueList" :key="item.courseId">
                <img :src="item.coverFileUrl">
                <div style="font:20px bolder">{{ item.courseTitle }}</div>
                <div>{{ item.learningNum }}人学习</div>
                <div v-if="item.isFree==='1'" style="color: #42b983;font-weight: bolder">免费</div>
                <div v-else-if="item.isDiscount==='1'">现价:<span style="color: red;font-weight: bolder">￥{{item.discountPrice}}</span>&nbsp;原价:<del style="color: gray;font-weight: 300">￥{{item.coursePrice}}</del></div>
                <div v-else>价格<span style="color: red;font-weight: bolder">￥{{item.coursePrice}}</span></div>
            </div>
        </div>
        <div class="box">
            <div v-for="item in discountList" :key="item.courseId">
                <img :src="item.coverFileUrl">
                <div  style="font:20px bolder">{{ item.courseTitle }}</div>
                <div>{{ item.learningNum }}人学习</div>
                <div v-if="item.isFree==='1'" style="color: #42b983;font-weight: bolder">免费</div>
                <div v-else-if="item.isDiscount==='1'">现价:<span style="color: red;font-weight: bolder">￥{{item.discountPrice}}</span>&nbsp;原价:<del style="color: gray;font-weight: 300">￥{{item.coursePrice}}</del></div>
                <div v-else>价格<span style="color: red;font-weight: bolder">￥{{item.coursePrice}}</span></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">

.box {
  display: flex;
  justify-content: space-evenly;
    >div{
        width: 19%;
    }
}
</style>